<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j component-order-screen">
    <view
      class="mask"
      @tap.stop="closeScreen"
    />
    <view class="mask-box">
      <view
        class="content"
        @tap.stop="content"
      >
        <view class="time">
          <view class="time-title">
            下单时间
          </view>
          <view class="btn-box">
            <view
              v-for="item in orderTime"
              :key="item.value"
              class="btn"
              :class="{ active: dataForm.timeActive === item.value }"
              @tap="setDateRange(item.value)"
            >
              {{ item.label }}
            </view>
          </view>
          <view
            v-if="dataForm.timeActive === -1"
            class="time-box"
          >
            <view
              class="time-header"
              @tap="handleDataPick('start')"
            >
              <view class="title">
                开始时间
              </view>
              <view
                class="value"
                :class="{ show: showStart }"
              >
                {{
                  dataForm.dateRange[0]
                }}
              </view>
            </view>
            <date-picker
              v-if="showStart"
              v-model="dataForm.dateRange[0]"
              :check-past="true"
              class="date-picker"
              type="start"
            />
            <view
              class="time-header end"
              @tap="handleDataPick('end')"
            >
              <view class="title">
                结束时间
              </view>
              <view
                class="value"
                :class="{ show: showEnd }"
              >
                {{
                  dataForm.dateRange[1]
                }}
              </view>
            </view>
            <date-picker
              v-if="showEnd"
              v-model="dataForm.dateRange[1]"
              :check-past="true"
              class="date-picker"
              type="end"
            />
          </view>
        </view>
        <view class="type">
          <view class="title">
            订单类型
          </view>
          <view class="btn-box">
            <view
              v-for="item in orderTypes"
              :key="item.value"
              class="btn"
              :class="{ active: dataForm.orderType === item.value }"
              @tap="handleOrderType(item.value)"
            >
              {{ item.label }}
            </view>
          </view>
          <view class="title">
            支付方式
          </view>
          <view class="btn-box">
            <view
              v-for="item in payTypes"
              :key="item.value"
              class="btn"
              :class="{ active: dataForm.payType === item.value }"
              @tap="handlePayType(item.value)"
            >
              {{ item.label }}
            </view>
          </view>
          <view class="title">
            物流类型
          </view>
          <view class="btn-box">
            <view
              v-for="item in dvyTypes"
              :key="item.value"
              class="btn"
              :class="{ active: dataForm.dvyType === item.value }"
              @tap="handleDvyType(item.value)"
            >
              {{ item.label }}
            </view>
          </view>
        </view>
        <view class="content-bottom">
          <view class="footer">
            <view
              class="footer-btn reset"
              @tap="resetDataForm"
            >
              重置
            </view>
            <view
              class="footer-btn sumbit"
              @tap="sumbitData"
            >
              确定
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import dayjs from 'dayjs'
import { computed, onMounted, reactive } from 'vue'
const emit = defineEmits(['closeScreen', 'handleScreen'])

const props = defineProps({
  screenForm: {
    type: Object,
    default () {
      return {
        dateRange: ['', ''],
        orderType: '',
        payType: '',
        dvyType: '',
        timeActive: 0
      }
    }
  }
})

const paySettlementType = uni.getStorageSync('bbcPaySettlementType')

const Data = reactive({
  dataForm: {},
  date: '2021-12-09 00:00:00',
  showStart: false,
  showEnd: false,
  orderTime: [
    {
      label: '全部',
      value: 0
    },
    {
      label: '今天',
      value: 1
    },
    {
      label: '昨天',
      value: 2
    },
    {
      label: '近七天',
      value: 3
    },
    {
      label: '近30天',
      value: 4
    },
    {
      label: '自定义',
      value: -1
    }
  ],
  orderTypes: [
    {
      value: '',
      label: '全部'
    },
    {
      value: 0,
      label: '普通订单'
    },
    {
      value: 1,
      label: '团购订单'
    },
    {
      value: 2,
      label: '秒杀订单'
    }
  ],
  dvyTypes: [
    {
      value: '',
      label: '全部'
    },
    {
      value: 1,
      label: '快递'
    },
    {
      value: 2,
      label: '自提'
    },
    {
      value: 3,
      label: '无需快递'
    },
    {
      value: 4,
      label: '同城配送'
    }
  ]
})

const { dataForm, showStart, showEnd, orderTime, orderTypes, dvyTypes } = toRefs(Data)

const payTypes = computed(() => {
  const typeVal = [
    {
      value: '',
      label: '全部'
    },
    {
      value: 0,
      label: '积分支付'
    },
    {
      value: 1,
      label: '微信支付'
    },
    {
      value: 2,
      label: '支付宝支付'
    },
    {
      value: 3,
      label: '余额支付'
    },
    {
      value: 4,
      label: 'PayPal支付'
    }
  ]
  if (paySettlementType === 1) {
    return typeVal.filter((item) => {
      return item.value !== 4
    })
  }
  return typeVal
})

onMounted(() => {
  Data.dataForm = props.screenForm
})

const content = () => {}

const closeScreen = () => {
  emit('closeScreen')
}

const handleDataPick = (type) => {
  if (Data.dataForm.timeActive !== -1) {
    return
  }
  const date = dayjs(undefined, 'YYYY-M-D')
  if (type === 'start') {
    Data.showStart = !Data.showStart
    if (Data.showStart) {
      Data.dataForm.dateRange[0] ||= date.startOf('day').format('YYYY-MM-DD HH:mm:ss')
      Data.showEnd = false
    }
  }
  if (type === 'end') {
    Data.showEnd = !Data.showEnd
    if (Data.showEnd) {
      Data.dataForm.dateRange[1] ||= date.endOf('day').format('YYYY-MM-DD HH:mm:ss')
      Data.showStart = false
    }
  }
}

/**
     * 根据选项设置时间
     * 1:今天 2:昨天 3: 近七天 4:近30天 5:近60天
     */
const setDateRange = (val) => {
  if (val !== -1) {
    Data.showStart = false
    Data.showEnd = false
  }
  Data.dataForm.timeActive = val
  let startDay = null
  let endDay = null
  if (val === 1) {
    startDay = 0
    endDay = 0
  } else if (val === 2) {
    startDay = -1
    endDay = -1
  } else if (val === 3) {
    startDay = -7
    endDay = -1
  } else if (val === 4) {
    startDay = -30
    endDay = -1
  } else {
    startDay = 0
    endDay = 0
  }
  // 开始时间
  const startTime = dayjs()
    .add(startDay, 'days')
    .startOf('days')
    .format('YYYY-MM-DD HH:mm:ss')
  // 结束时间
  const endTime = dayjs()
    .add(endDay, 'days')
    .endOf('days')
    .format('YYYY-MM-DD HH:mm:ss')
  Data.dataForm.dateRange = [startTime, endTime]
  // 每次选择全部或者自定义时清空
  if (val === 0 || val === -1) {
    Data.dataForm.dateRange = ['', '']
  }
}

// 选择订单类型
const handleOrderType = (orderType) => {
  Data.dataForm.orderType = orderType
}

// 选择支付方式
const handlePayType = (payType) => {
  Data.dataForm.payType = payType
}

// 选择物流类型
const handleDvyType = (dvyType) => {
  Data.dataForm.dvyType = dvyType
}

// 提交
const sumbitData = () => {
  const [startTime, endTime] = Data.dataForm.dateRange
  const start = new Date(startTime).getTime()
  const end = new Date(endTime).getTime()
  if (start > end) {
    uni.showToast({
      title: '结束时间不能小于开始时间',
      icon: 'none'
    })
    return
  }
  emit('handleScreen', Data.dataForm)
}

const resetDataForm = () => {
  Data.dataForm = {
    dateRange: ['', ''],
    orderType: '',
    payType: '',
    dvyType: '',
    timeActive: 0
  }
  Data.showStart = false
  Data.showEnd = false
}
</script>

<style lang="scss" scoped>
.component-order-screen {
  .mask {
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100vh;
    z-index: 666;
    overflow: hidden;
  }
  .date-picker {
    transition: all 1s ease;
  }
  @keyframes window-open {
    0% {
      right: -664rpx;
    }
    100% {
      right: 0;
    }
  }
  .mask-box {
    height: 100vh;
    background-color: #f6f8fa;
    border-radius: 20rpx 0rpx 0rpx 20rpx;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    width: 664rpx;
    animation: window-open 0.4s 1;
    .content {
      width: 100%;
      height: calc(100% - 128rpx);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      overflow-y: auto;
      .time {
        background: #ffffff;
        border-radius: 20rpx 0 20rpx 20rpx;
        padding: 30rpx;
        .time-title {
          font-size: 24rpx;
          font-weight: bold;
          line-height: 34rpx;
          color: #000000;
        }
        .time-box {
          .time-header {
            margin-top: 20rpx;
            margin-left: 10rpx;
            display: flex;
            font-size: 24rpx;
            align-items: center;
            justify-content: space-between;
            line-height: 34rpx;
            .value {
              margin-right: 20rpx;
              display: flex;
              align-items: center;
            }
            .value::after {
              content: '';
              margin: 0 0 0 10rpx;
              border: solid #000000;
              border-width: 0 1px 1px 0;
              display: inline-block;
              padding: 4rpx;
              transform: rotate(-45deg);
              transition: all 0.5s ease;
            }
            .value.show::after {
              transform: rotate(45deg);
              margin-bottom: 10rpx;
              transition: all 0.5s ease;
            }
          }
          .time-header.end {
            margin-top: 20rpx;
          }
        }
      }
      .type {
        flex: 1;
        padding: 30rpx;
        margin-top: 20rpx;
        // height: 100%;
        background: #ffffff;
        border-radius: 20rpx 20rpx 0 0;
        // margin-bottom: 154rpx;
        .title {
          font-size: 24rpx;
          margin-bottom: 20rpx;
          font-weight: bold;
          line-height: 34rpx;
          color: #000000;
        }
      }
      .content-bottom {
        background: #fff;
        height: 128rpx;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 664rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0rpx 0rpx 0rpx 20rpx;
        // margin: 0 auto;
      }
      .footer {
        width: 604rpx;
        height: 70rpx;
        background: #082ba6;
        // border: 2rpx solid #082ba6;
        opacity: 1;
        border-radius: 36rpx;
        display: flex;
        .footer-btn {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .footer-btn.reset {
          border: 2rpx solid #082ba6;
          font-size: 26rpx;
          font-weight: bold;
          color: #082ba6;
          background-color: #fff;
          border-radius: 36rpx 0rpx 36rpx 36rpx;
        }
        .footer-btn.sumbit {
          font-size: 26rpx;
          font-weight: bold;
          color: #ffffff;
          border-radius: 0 36rpx 36rpx 0;
        }
      }
      .btn-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        .btn {
          background: #f6f8fa;
          border-radius: 26rpx;
          font-size: 24rpx;
          width: 188rpx;
          height: 52rpx;
          line-height: 52rpx;
          box-sizing: border-box;
          text-align: center;
          display: inline-block;
          margin-top: 20rpx;
          margin-right: 12rpx;
        }
        .btn.active {
          border: 2rpx solid #082BA6;
          color: #082BA6;
        }
        margin-bottom: 30rpx;
      }
    }
  }
}

</style>
